<template>
  <div>
    <van-swipe :autoplay="2000" indicator-color="white"> 
  <van-swipe-item v-for="(image, index) in imglist" :key="index"  >
    <img class="ims" :src="image" style="width: 100vw;"/>
  </van-swipe-item>
</van-swipe>
  <div class="cate-list">
    <div class="cate-side">
    <van-sidebar v-model="index">
   <van-sidebar-item :title="v.cname"  class="cate-item" v-for="v,k in list" :key="k"  @click="on(k)" />
  <!-- {{ v.cname }} -->
   </van-sidebar>
</div>
<div class="cate-content">
<van-card v-for="n,m in list[index]?.children"  :key="m"
          @click="go(n)"
          :price="n.price.toFixed(2)"
          :desc="n.tintro"
          :title="n.tname"
          :thumb="n.fullSrc"
        >
          <!-- <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template> -->
          <!-- <template #footer>
            <van-button @click.stop="addcar(v)" type="primary" size="mini">加入购物车</van-button>
           
          </template> -->
        </van-card>
  </div>
  </div>
  </div>
</template>
<script>
import { cateDate } from '@/api';
export default {
    components: {},
    props: {},
    data() {
        return {
            list:[],
            imglist:[],
            index: 0,
        };
    },
    computed: {},
    created() {},
    mounted() {
      this.getData()
    },
    methods: {
      async getData(){// 获取分类数据
        let res=await cateDate()
        console.log(res);
        if(res.code==200){
          this.list=res.data.list
          this.imglist=res.data.swipe
        }
      },
      on(k) {
        this.index = k;
        console.log(this.index);
        
    },
    go(n) {
        console.log(n);
        this.$router.push("/det?tid="+n.tid)
    },
  },
    watch: {},
};
</script>
<style scoped lang="less">
.cate-list{
  display: flex;
  // justify-content: space-between;
.cate-side{
  // width: 50px;
  height: 400px;
  .cate-item{
    height: 60px;
  }
  
}
.cate-content{
  // border: 1px solid red;
  width: 300px;
  // margin: 0 auto;
}
}
</style>
